<template>
  <Drawer
    :title="$t('form.service.title')"
    @btn_click="submit"
    v-model:visible="drawerVisible"
  >
    <div ref="formContainerRef">
      <a-form ref="formRef" :model="formData">
        <a-form-item
          :label="$t('form.service.form.item_1.placeholder')"
          name="name"
        >
          <a-input
            size="large"
            :maxlength="30"
            v-model:value.trim="formData.name"
            :rules="[
              {
                required: true,
                message: $t('form.service.form.item_1.error_1'),
                trigger: 'blur',
              },
            ]"
            :placeholder="$t('form.service.form.item_1.placeholder')"
          ></a-input>
        </a-form-item>
        <a-form-item
          :label="$t('form.service.form.item_2.placeholder')"
          name="email"
          :rules="[{ validator: checkEmail, trigger: 'blur' }]"
        >
          <a-input
            :maxlength="30"
            size="large"
            v-model:value.trim="formData.email"
            :placeholder="$t('form.service.form.item_2.placeholder')"
          ></a-input>
        </a-form-item>
        <a-form-item
          :label="$t('form.service.form.item_3.placeholder')"
          name="mobile"
          :rules="[{ validator: checkMobile, trigger: 'blur' }]"
        >
          <a-input
            size="large"
            :maxlength="30"
            v-model:value.trim="formData.mobile"
            :placeholder="$t('form.service.form.item_3.placeholder')"
          ></a-input>
        </a-form-item>
        <a-form-item
          :label="$t('form.service.form.item_4.placeholder')"
          name="company"
          :rules="[
            {
              required: true,
              message: $t('form.service.form.item_4.error_1'),
              trigger: 'blur',
            },
          ]"
        >
          <a-textarea
          
              :maxlength="1000"
            v-model:value.trim="formData.company"
            :placeholder="$t('form.service.form.item_4.placeholder')"
            :rows="2"
          />
        </a-form-item>
      </a-form>
    </div>
  </Drawer>
</template>

<script setup lang="ts">
import { getCurrentInstance, nextTick, onMounted, ref, watch } from "vue";
import { useRoute } from "vue-router";
import { RegEmail, RegMobile } from "../../data/reg";
import { SubmitJob } from "../../api/talent";
import { postSupportApply } from "../../api/support";
import { postRentApply } from "../../api/rent";
import { postCourseSimpleSubmit } from "../../api/aviation";
import { postLmSubmit } from "../../api/api";
import { message } from "ant-design-vue";
import { useMemberStore } from "../../store";
import type { RentApplyParams } from "../../types/rent";

type SupportData = {
  type: string;
  service_code: string;
  repair_service: string;
};
const props = defineProps<{
  submit_id?: string;
  supportData?: SupportData;
  type_key?: string;
}>();

const $t = getCurrentInstance()?.appContext.config.globalProperties.$t;

const { profile } = useMemberStore();

const drawerVisible = ref(false);
const close = () => {
  formRef.value.resetFields();
  drawerVisible.value = false;
};

const show = () => {
  formData.value.name = profile?.last_name! + ' ' + profile?.first_name!;
  formData.value.email = profile?.email!;
  formData.value.mobile = profile?.mobile!;
  formData.value.company = profile?.company!;
  drawerVisible.value = true;
};

const checkEmail = (_rule: any, value: string) => {
  if (!value) return Promise.reject($t("form.service.form.item_2.error_1"));
  if (!RegEmail.test(value)) return Promise.reject($t("reg_rules.email"));
  return Promise.resolve();
};
const checkMobile = (_rule: any, value: string) => {
  if (!value) return Promise.reject($t("form.service.form.item_3.error_1"));
  if (!RegMobile.test(value)) return Promise.reject($t("reg_rules.mobile"));
  return Promise.resolve();
};

const formData = ref<RentApplyParams>({
  name: "",
  email: "",
  mobile: "",
  company: "",
  remark: "",
  tanlent_id: "",
});

defineExpose({
  close,
  show,
});

onMounted(() => {
  setValidateStyle();
});

let formContainerRef = ref<HTMLElement | undefined>();

const formLabel = ref({
  label_1: $t("form.service.form.item_1.placeholder"),
  label_2: $t("form.service.form.item_2.placeholder"),
  label_3: $t("form.service.form.item_3.placeholder"),
  label_4: $t("form.service.form.item_4.placeholder"),
});
const memberStore = useMemberStore();
watch(
  () => memberStore.AppLang,
  () => {
    if (formContainerRef.value) {
      setTimeout(() => {
        nextTick(() => {
          let form_item_names = formContainerRef.value?.querySelectorAll(
            ".ant-form-item-label > label"
          );
          form_item_names?.forEach((item, index) => {
            item.innerHTML = $t(
              `form.service.form.item_${index + 1}.placeholder`
            );
          });
        });
      });
    }
  }
);

// 提交表单
const route = useRoute();

const isLoading = ref(false);
const formRef = ref();
const submit = () => {
  formRef.value.validate().then(async () => {
    isLoading.value = true;
    let res;
    if (route.path.includes("/job/detail")) {
      formData.value.tanlent_id = props.submit_id + "";
      res = await SubmitJob(formData.value);
    } else if (route.path.includes("/support")) {
      Object.assign(formData.value, props.supportData);
      res = await postSupportApply(formData.value);
    } else if (route.path.includes("/rent")) {
      formData.value.submit_id = props.submit_id + "";
      res = await postRentApply(formData.value);
    } else if (props.type_key == "simple_course") {
      formData.value.submit_id = props.submit_id + "";
      res = await postCourseSimpleSubmit(formData.value);
    } else if (props.type_key == "lm") {
      formData.value.submit_id = props.submit_id + "";
      res = await postLmSubmit(formData.value);
    }
    if (res?.code === 200) {
      message.success($t("message.success.submit"));
    } else {
      message.error($t("message.error.submit"));
    }
    close();
    isLoading.value = false;
  });
};

const setValidateStyle = () => {
  let doms = (formContainerRef.value as HTMLElement).querySelectorAll(
    ".ant-form-item .ant-form-item-label label"
  );
  doms.forEach((item) => {
    item.innerHTML = item.innerHTML.replace(
      "*",
      '<span style="color: #FF4060;">*</span>'
    );
  });
};
</script>
<style scoped lang="less">
:deep(.ant-form) {
  .ant-form-item-label {
    flex: none;
    width: 700px;
    display: flex;
    align-items: center;
    padding-bottom: 0;
    label {
      font-size: 82px;
    }
  }
  .ant-form-item-control {
    flex: 1;
  }
  .ant-form-item {
    margin-bottom: 0;
    flex: 1;
    border-bottom: 3px solid #e6edf2;
    .ant-input {
      box-shadow: 0 0 0 transparent !important;
      border-color: transparent !important;
      &:hover,
      &:focus {
        border-color: transparent !important;
      }
    }
    &:last-child {
      border-bottom: 0;
      .ant-form-item-label {
        padding-top: 82px;
        align-items: flex-start;
        transform: translateY(-30px);
      }
      .ant-input {
        margin: 82px;
        margin-left: 0;
        padding: 0;
      }
    }
    .ant-form-item-explain-error {
      text-align: right;
    }
    .ant-form-item-required {
      &::before {
        display: none !important;
      }
    }
  }
  .ant-input {
    padding: 82px;
    padding-right: 0;
    border-color: transparent;
    font-size: 82px;
    box-shadow: 0 0 0 transparent;
    &:hover {
      border-color: transparent;
    }
  }
  .ant-input {
    text-align: right;
    &::placeholder {
      text-align: right;
    }
  }
}

.footer {
  border-top: 3px solid #e6edf2;
  padding: 82px;
  padding-top: 41px;
}
</style>
